<%--
  Created by IntelliJ IDEA.
  User: teacher
  Date: 2023/11/2
  Time: 11:32
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script>
        function sayHello(){
            // 1.获取Ajax引擎
            // let xhr = new XMLHttpRequest();
            // console.log(xhr)
            // 早期是区分浏览器的
            let xhr;
            if(window.XMLHttpRequest){
                xhr = new XMLHttpRequest();
                console.log("通用获取方式:"+xhr);
            } else{
                // 早期在IE8之前是无法直接获取
                // 通过一个特殊方式进行获取
                xhr = new ActiveXObject("Microsoft.XMLHTTP");
                console.log("IE8之前获取方式:"+xhr);
            }

            // 2.准备回调函数
            // 回调函数:当返回响应之后,js基于这个响应做什么样的处理
            // xhr.onreadystatechange = callback;
            xhr.onreadystatechange = function(){
                console.log("ajax状态:"+xhr.readyState);
                console.log("Http状态:"+xhr.status);
                // 当Ajax状态为4以及Http状态为200时,表示响应已经回来
                if(xhr.readyState == 4 && xhr.status == 200){
                    // 获取响应的数据
                    let result = xhr.responseText;
                    console.log("响应数据:"+result)
                    document.getElementById("s1").innerHTML = result;
                }
            }

            // 3.建立连接
            xhr.open("get","${pageContext.request.contextPath}/sayHello")

            // 4.发送请求
            // 发送请求时,如果请求有参数,其方法参数即为请求参数
            // 如果请求没有参数,则方法参数为null即可
            xhr.send(null);
        }
        function callback(){

        }
    </script>
</head>
<body>
    <button onclick="sayHello()">测试</button>
    <span id="s1"></span>
</body>
</html>
